<template>
  <div class="myinput">
    <!-- 添加动态class -->
    <!-- @blur:获得焦点 -->
    <input
      :class="{
        error: !isOk,
      }"
      @blur="showErrMsg"
      :type="type"
      :placeholder="placeholder"
      v-model="value"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      isOk: true,
    };
  },
  props: ["placeholder", "type", "rule", "errMsg"],
  watch: {
    value(newVal) {
      // 这里是格式校验
      if (this.rule.test(newVal)) {
        console.log("合法");
        this.isOk = true;
      } else {
        // console.log("不合法");
        console.log(this.errMsg);
        this.isOk = false;
      }
      // 格式校验之后，其实这是父组件发请求时需要用的：
      // 我们需要把数据往父组件发出去
      this.$emit("setValue", newVal);
    },
  },
  methods: {
    showErrMsg() {
      if (!this.isOk) {
        // alert(this.errMsg);
        this.$toast.fail(this.errMsg);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.myinput {
  input {
    background-color: #f2f2f2;
    margin-bottom: 15 / 360 * 100vw;
    width: 100%;
    height: 40 / 360 * 100vw;
    line-height: 40 / 360 * 100vw;
    font-size: 18 / 360 * 100vw;
    //   聚焦：
    outline: none;
    border: 0;
    border-bottom: 1px solid #888;
  }
  .error {
    border-color: red;
  }
}
</style>